<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    事件委托其实并不是一个新的知识点，而是对现有知识点的应用<br>

    在页面中，一个事件是一直存在的，和你是否捕获是没有关系的，即使没有捕获，对应的事件也是存在的。<br>

    比如对一个列表来说，一个ul元素下面有很多的li，如果我们对ul绑定了一个点击事件，当我们点击li的时候，
    这个事件的目标还是li，而不是ul。整个事件会从dom的根元素，传递到li，然后在冒泡阶段被ul捕获到。
    在这个事件中，就会记录当前点击的目标是li。<br>
    这就可以让我们做到事件委托绑定。如果我们要为每个li绑定一个点击事件，我们只需要为ul绑定一个点击事件，然后在ul中获取到所点击的对应li，就能为那个li执行点击事件。

    <ul>
        <li>我是第一个</li>
        <li>我是第二个</li>
        <li>我是第三个</li>
        <li>我是第四个</li>
        <li>我是第五个</li>
        <p>hah</p>
    </ul>
<script>
    let ul = document.querySelector("ul")

    ul.addEventListener("click", function(e) {
        console.dir(e.target)
        // e.target就是对应的目标元素对象，我们可以直接使用
        // e.target.style.color = "red"

        // e.target里面有一个属性tagName来说明该元素的标签，用来精确定位我们需要的元素
        if (e.target.tagName == "LI") {
            e.target.style.color = "red"
        }
    })
</script>
</body>
</html>